<template>
    <!-- 信息管理 -->
    <div class="userinfo">
        <div class="header">基本信息</div>
        <div class="flexleft mainpadding">
            <div class="margin-right3"><el-avatar shape="square" :size="120" :src="dataAll.userHeadimg"></el-avatar></div>
            <ul style="margin-right: 400px;">
                <li class="titletext">{{ dataAll.userName }}
                    <el-button type="text" v-show="dataAll.isRealname" icon="el-icon-success"
                        style="color: #07b571;">已实名</el-button>

                    <!-- <el-button type="text">自助更名</el-button> -->
                </li>
                <li class="tabtext hui">
                    <span class="margin-right3">证件号：</span>
                    <span>{{ dataAll.idNumber }}</span>
                    <!-- <el-button type="text">数字证书</el-button> -->

                </li>
                <li>
                    <el-button type="text" @click="lookCertificate">查看数字证书</el-button>
                </li>
            </ul>
            <ul class="tabtext">
                <li>
                    <span class="margin-right3 hui">所属企业</span>
                    <span class="margin-right1">{{ dataAll.enterpriseName }}</span>
                    <el-button type="text" v-if="dataAll.isAutonym" icon="el-icon-success"
                        style="color: #07b571;">已实名</el-button>
                </li>
            </ul>
        </div>
        <div class=" mainpadding titletext">
            <span class="margin-right1">登录设置</span><span class="tabtext hui">用于登录当前账号</span>
        </div>
        <div class="mainpadding">
            <el-row>
                <el-col :span="10">
                    <div class="flexbetween">
                        <div class="tabtext">
                            <span class="hui margin-right3">手机号</span>
                            <span>{{ dataAll.userPhone }}</span>
                        </div>
                        <!-- <div>
                            <el-button type="text" class="margin-right1">解绑</el-button>
                            <el-button type="text" size="small">修改</el-button>
                        </div> -->
                    </div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="10">
                    <div class="flexbetween margin-top1">
                        <div class="tabtext">
                            <span class="hui margin-right3">登录密码</span>
                            <!-- <span>{{ dataAll.password }}</span> -->
                            <span v-if="dataAll.password">******</span> 
                        </div>
                        <el-button type="text" size="small" @click="changepass(1)">{{ dataAll.password ? '修改' : "设置"
                        }}</el-button>
                    </div>
                </el-col>
            </el-row>
            <!-- <el-row>
                <el-col :span="10">
                    <div class="flexbetween margin-top1">
                        <div class="tabtext">
                            <span class="hui margin-right3">微信账号</span>
                            <span>{{ dataAll.wxOpenId ? "已绑定" : "未绑定" }}</span>
                        </div>
                        <el-button type="text" size="small" v-show="dataAll.wxOpenId" @click="wxunbind">解绑</el-button>
                        <el-button type="text" size="small" v-show="!dataAll.wxOpenId">绑定</el-button>
                    </div>
                </el-col>
            </el-row> -->
        </div>
        <div class="mainpadding titletext">
            <span class="margin-right1">签署设置</span><span class="tabtext hui">在文件签署环节用于表达您真实的签署信息</span>
            <el-row>
                <el-col :span="10">
                    <div class="flexbetween margin-top1">
                        <div class="tabtext">
                            <span class="hui margin-right3">签署密码</span>
                            <!-- <span>{{ dataAll.password }}</span> -->
                            <span v-if="dataAll.signPassword">******</span>
                        </div>
                        <el-button type="text" size="small" @click="changepass(2)">{{ dataAll.signPassword ? '修改' : "设置"
                        }}</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 修改密码 -->
        <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form :model="editpass" ref="editpass" :rules="rules">
                <el-form-item label="请输入旧密码" prop="oldSignPassword" v-if="changepassType == 2 && dataAll.signPassword">
                    <el-input placeholder="请输入密码" type="password" style="width: 400px;" v-model="editpass.oldSignPassword">
                    </el-input>
                </el-form-item>
                <el-form-item label="请输入新密码" prop="password">
                    <el-input placeholder="请输入新密码" type="password" style="width: 400px;" v-model="editpass.password">
                    </el-input>
                </el-form-item>
                <el-form-item label="请确认新密码" prop="newPassword">
                    <el-input placeholder="请确认新密码" type="password" style="width: 400px;" v-model="editpass.newPassword">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editpassword('editpass')">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="digitalCertificateVisible" class="digitalCertificateModel" width="40%"
            @close="digitalCertificateClose">
            <div slot="title"></div>
            <div class="digitalCertificate">
                <ul>
                    <li>持有人<span>{{ dataAll.userName }}</span></li>
                    <li>颁发者<span>NMGWX RSA OCA1</span></li>
                    <li>证件号<span>{{ dataAll.idNumber }}</span></li>
                    <li>序列号<span>{{ dataAll.serialNo ? dataAll.serialNo : '-' }}</span></li>
                    <li>有效期<span>{{ dataAll.caStartTime }} - {{ dataAll.caEndTime }}</span></li>
                </ul>
            </div>
            <div slot="footer" class="flexcolumn flexcenter">
                <el-button type="primary" @click="digitalCertificateClose">确定</el-button>
                <el-button type="text">《数字服务协议》</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getUpdPass, userWXopId, setSignPassword, updSignPassword } from "@/api/userinfo"
import Cookies from "js-cookie";
export default {
    inject: ['closeloading'],
    data() {
        return {
            dataAll: {},
            dialogVisible: false,
            digitalCertificateVisible: false,
            editpass: {
                oldSignPassword: "",
                password: "",
                newPassword: "",
                userId: Cookies.get('admin_id')
            },
            rules: {
                oldSignPassword: [
                    { required: true, message: '请输入旧密码', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                ],
                newPassword: [
                    { required: true, message: '请确认新密码', trigger: 'blur' },
                    {
                        validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请再次输入密码'))
                            } else if (value !== this.editpass.password) {
                                callback(new Error('两次输入密码不一致!'))
                            } else {
                                callback()
                            }
                        },
                        trigger: 'blur',
                    },
                ],
            },
            changepassType: 1,//1修改登录密码，2修改签署密码
        }
    },
    mounted() {
        this.getInfo()
    },
    methods: {
        changepass(value) {
            this.changepassType = value
            this.dialogVisible = true
        },
        lookCertificate() {
            this.digitalCertificateVisible = true;
        },
        digitalCertificateClose() {
            this.digitalCertificateVisible = false;
        },
        getInfo() {
            this.$store.dispatch("user/getUserInfo").then(res => {
                this.closeloading()
                this.dataAll = this.$store.state.user.userInfomsg//在Vuex里面获取userinfomsg数据
                console.log(res.userName, res.idNumber, res.serialNo, res.caStartTime, res.caEndTime);
            })
        },
        // 修改密码
        editpassword(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogVisible = false
                    if (this.changepassType == 1) {//登录密码
                        getUpdPass(this.editpass).then(res => {
                            if (res.code == 200) {
                                this.$message.success(res.message)
                                this.getInfo()
                            } else {
                                this.$message.warning(res.message)
                            }
                        })
                    } else {//签署密码
                        console.log(123, this.dataAll.signPassword);
                        if (this.dataAll.signPassword) {//修改签署密码
                            updSignPassword({
                                newSignPassword: this.editpass.newPassword,
                                oldSignPassword: this.editpass.oldSignPassword
                            }).then(res => {
                                if (res.code == 200) {
                                    this.$message.success(res.message)
                                    this.getInfo()
                                    this.reset()
                                } else {
                                    this.$message.warning(res.message)
                                    this.reset()
                                }
                            })
                        } else {
                            setSignPassword({//设置签署密码
                                signPassword: this.editpass.newPassword
                            }).then(res => {
                                if (res.code == 200) {
                                    this.$message.success(res.message)
                                    this.getInfo()
                                } else {
                                    this.$message.warning(res.message)
                                }
                            })
                        }

                    }

                } else {
                    return false;
                }
            });
        },
        reset(){
            this.editpass = {
                oldSignPassword: "",
                password: "",
                newPassword: "",
                userId: Cookies.get('admin_id')
            }
        },
        wxunbind() {
            this.$confirm('解绑微信操作, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                userWXopId({
                    userId: Cookies.get('admin_id'),
                    // wxOpenId: this.dataAll.wxOpenId
                }).then(res => {
                    if (res.code == 200) {
                        this.$message.success(res.message)
                        this.getInfo()
                    } else {
                        this.$message.warning(res.message)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作'
                });
            });

        },
        handleClose(done) {
            done();
        }
    }
}
</script>

<style lang="scss" scoped>
.userinfo {
    .digitalCertificateModel {
        :deep(.el-dialog__header) {
            display: none;
        }

        :deep(.el-dialog__footer) {
            padding-top: 0;
            padding-bottom: 10px;
        }

        .digitalCertificate {
            width: 535px;
            height: 400px;
            margin: 0 auto;
            background: url("@/assets/img/certificate.png") no-repeat center;
            background-size: cover;
            display: flex;
            align-items: center;

            ul {
                margin-left: 80px;
                padding-top: 60px
            }

            ul>li {
                margin: 20px 0;
            }

            ul>li>span {
                margin-left: 35px;
            }
        }
    }
}

.header {
    height: 50px;
    border-bottom: 1px solid #e4e4e4;
    line-height: 50px;
    padding-left: 30px;
}
</style>